<template>
   <!-- 首页顶部 -->
   <HomeHeader />
   <div class="home">
      <van-notice-bar left-icon="volume-o" text="走过路过，千万不要错过，清仓特价大甩卖，买的越多，赚的越多" />
      <!-- 轮播图 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
               <van-swipe-item v-for="item of swipeData" :key="item.banneris"><img :src="item.img" :alt="item.alt">
               </van-swipe-item>
            </van-swipe>
         </div>

         <!-- 宫格数据 -->
         <div class="grid">
            <van-grid :column-num="5" :border="false">
               <van-grid-item v-for="item in gridData" :key="item.id" :icon="item.url" :text="item.text" />
            </van-grid>
         </div>

         <!-- 秒杀列表功能 -->
         <div class="seckill">
            <!-- 秒杀头部时间显示 -->
            <div class="seckill-header">
               <h3 class="seckill-title">京东秒杀</h3>
               <div class="seckill-hour">{{showTime}}点场</div>
               <!-- 引入组件 CountDown 倒计时(自定义样式) -->
               <van-count-down :time="time">
                  <template #default="timeData">
                     <span class="block">{{ timeData.hours<10?'0'+ timeData.hours:timeData.hours}}</span>
                           <span class="colon">:</span>
                           <span class="block">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</span>
                                 <span class="colon">:</span>
                                 <span class="block">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds
                                 }}</span>
                  </template>
               </van-count-down>
            </div>
            <!-- 秒杀推荐商品 -->
            <div class="seckill-content">
               <div class="content-item" v-for="item of listData" :key="item.proid"
                  @click="$router.push('/detail/'+item.proid)">
                  <img :src="item.banners[0]" alt="">
                  <p class="price">¥{{item.originprice}}</p>
               </div>
            </div>
         </div>

         <!-- 商品列表 -->
         <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <GoodsList :goodslist='goodslist' />
         </van-list>
      </van-pull-refresh>
   </div>
   <!-- 底部导航栏 -->
   <HomeFooter />
</template>

<script setup lang='ts'>
import { ref, onBeforeUnmount, onMounted } from 'vue';
import HomeHeader from '@/components/HomeHeader.vue'
import HomeFooter from '@/components/HomeFooter.vue';
//宫格数据写死的，不用做响应式
import { getSwipe, gridData, prolist, secklillList } from '@/apis/home'
import GoodsList from '@/components/GoodsList.vue';
import { Loading } from 'vant';
//存放轮播图数据
const swipeData = ref([])
//展示轮播图
const showSwipe = () => {
   getSwipe().then(
      res => {
         swipeData.value = res.data
         // 隐藏下拉刷新转圈圈
         refreshing.value = false;
      }
   )
}
onMounted(() => {
   showSwipe()
})

//秒杀时间
//距离下一场秒杀剩余的毫秒数
let time = ref(0)
//页面要展示的时间场次
let showTime = ref(0)
let timerId: null | number = null
onMounted(() => {
   timerId = setInterval(() => {
      // 当前几点
      let now = new Date();
      // 现在是几点
      let nowHour = now.getHours();
      // 现在是几号
      let nowDay = now.getDate();
      // 现在是几月
      let nowMonth = now.getMonth();
      // 现在是多少年
      let nowYear = now.getFullYear();


      // 下一场秒杀是几点
      let nextHour = nowHour % 2 == 1 ? nowHour + 1 : nowHour + 2;
      // 下一场秒杀的时间
      let nextDate = new Date(nowYear, nowMonth, nowDay, nextHour, 0, 0, 0);
      // 页面要展示的时间场次
      showTime.value = nextDate.getHours();
      time.value = nextDate.getTime() - now.getTime();
   }, 1000)
})
onBeforeUnmount(() => {
   clearInterval(timerId)
})


// 秒杀的商品列表
const listData = ref([]);
// 显示秒杀商品的方法
const showmiaosha = () => {
   secklillList()
      .then(res => {
         listData.value = res.data;
      })
}
onMounted(() => {
   showmiaosha()
})

//商品列表
//当前商品列表显示的页码
const count = ref(1)
//展示商品列表的数据的盒子
const goodslist = ref([])
//定义请求数据列表的方法
const showList = () => {
   prolist(count.value)
      .then(res => {
         loading.value = false
         if (count.value == 1) {
            goodslist.value = res.data
         } else {
            // 当前请求的数据的data里面没有数据时
            // 触底也不用加载下一页了
            if (res.data.length == 0) {
               finished.value = true
            } else {
               // 只有当data里面的有数据的时候，才有可能有下一页
               goodslist.value = goodslist.value.concat(res.data)
            }
         }
      })
}
onMounted(() => {
   showList()
})


//下拉触底加载下一页
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
   loading.value = true
   count.value++
   showList()
}

//下拉刷新
const refreshing = ref(false)
const onRefresh = () => {
   // 显示转圈圈
   refreshing.value = true;
   // 重新请求首页数据
   // 轮播图
   showSwipe();
   // 秒杀列表
   showmiaosha();
   // 第一页商品列表
   count.value = 1;
   showList()
}
</script>

<style scoped lang='scss'>
.swipe {
   box-sizing: border-box;
   margin: 10px;
   border-radius: 10px;
   overflow: hidden;

   img {
      display: block;
      width: 100%;
   }
}

.grid {
   :deep(.van-grid-item__content) {
      background: transparent;
      padding: 16px 7px;
   }
}

.seckill {
   margin: 10px;
   border-radius: 15px;
   overflow: hidden;
   background: #fff;
   padding: 5px;

   .seckill-header {
      height: 40px;
      line-height: 40px;
      font-size: 15px;

      .seckill-title {
         float: left;
         font-size: 16px;
         font-weight: 900;
         text-align: center;
         padding-left: 5px;
         padding-right: 10px;
      }

      .seckill-hour {
         float: left;
         color: #ee0a24;
         font-weight: bold;
         height: 100%;
         margin-right: 10px;
      }

      .van-count-down {
         float: left;
         margin-top: 10px;

         .colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
         }

         .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #ee0a24;
         }
      }
   }

   .seckill-content {
      display: flex;

      .content-item {
         flex: 1;

         img {
            width: 80%;
            height: 13vw;
            margin: 5px auto;
         }

         .price {
            font-size: 0.8em;
            font-weight: bold;
            color: #f2270c;
            text-align: center;
         }
      }
   }
}
</style>
